import React, { useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { Form, Rate, Button } from 'choerodon-ui/pro';
import notification from 'utils/notification';

const CustomRate = props => {
  const {
    // 入参定义的普通参数
    formDS,
    editFlag,
    closeModal,
    // 内置执行父页面事件流
    handleRunEvent,
    // 入参定义的事件流
    save,
    // 修改出参
    handleChangeOutputParams,
    // 组件设置内部函数供父页面使用
    setEventFunction,
    fieldName = 'rate',
  } = props || {};
  const handleClose = () => {
    if (closeModal?.flowCode) {
      handleRunEvent(closeModal?.flowCode);
    }
  };
  const handleSave = () => {
    if (save?.flowCode) {
      handleRunEvent(save?.flowCode);
    }
  };

  useEffect(() => {
    setEventFunction('fn1', (p1, p2) => {
      if (!p1) {
        notification.error({
          message: '数据未填写完整',
          description: '请填写维修用时分数',
        });
        return;
      }
      if (!p2) {
        notification.error({
          message: '数据未填写完整',
          description: '请填写维修结果分数',
        });
        return;
      }
      if (p1 >= 90 && p2 >= 90) {
        formDS.current.set('evaluationGrade', 'A');
        notification.success({
          message: '计算评级已完成',
          description: `评级为A，维修用时分数：${p1}，维修结果分数：${p2}`,
        });
      } else if (p1 >= 70 && p1 >= 70) {
        formDS.current.set('evaluationGrade', 'B');
        notification.success({
          message: '计算评级已完成',
          description: `评级为B，维修用时分数：${p1}，维修结果分数：${p2}`,
        });
      } else {
        formDS.current.set('evaluationGrade', 'C');
        notification.success({
          message: '计算评级已完成',
          description: `评级为C，维修用时分数：${p1}，维修结果分数：${p2}`,
        });
      }
    });
  }, []);

  const handleChange = () => {
    handleChangeOutputParams({
      property: 'outParam1',
      data: '修改后的自定义出参1',
    });
  };

  return (
    <div>
      <Form dataSet={formDS} columns={1} labelAlign="right">
        <Rate name={fieldName} disabled={editFlag === 'false'} />
      </Form>
      <div style={{ float: 'right' }}>
        <Button onClick={handleClose}>取消</Button>
        <Button
          hidden={editFlag === 'false'}
          color="primary"
          onClick={handleSave}
        >
          保存
        </Button>
        {/* <Button hidden={editFlag === 'false'} color='primary' onClick={handleChange}>
          修改自定义出参
        </Button> */}
      </div>
    </div>
  );
};

export default observer(CustomRate);
